<template>
  <div class="passwordChange">
    <el-row class="passwordChange-a height40">
      <span class="height40-span">
        <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span">{{passwordChange.passwordChange}}</span>
    </el-row>
    <el-row class="passwordChange-b">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="0px"
        class="demo-ruleForm"
      >
        <el-form-item prop="oldPassword">
          <el-input
            v-model.trim="ruleForm.oldPassword"
            :placeholder="passwordChange.oldPassword"
            autocomplete="off"
            :type="oldPasswordEye"
            @focus="focusShowoldPasswordEye"
            @keyup.space.native="handleOldPassword"
          ></el-input>
          <div v-if="oldPasswordEyeDiv">
            <img
              :src="eye.eye_open"
              v-if="eyeShowoldPassword"
              @click="changeoldPassword('show')"
              alt
              class="imgEye"
            />
            <img
              :src="eye.eye_close"
              v-if="!eyeShowoldPassword"
              @click="changeoldPassword('hide')"
              alt
              class="imgEye"
            />
          </div>
        </el-form-item>
        <el-form-item prop="newPassword">
          <el-input
            v-model.trim="ruleForm.newPassword"
            :placeholder="passwordChange.newPassword"
            autocomplete="off"
            :type="newPasswordEye"
            @focus="focusShownewPasswordEye"
            @keyup.space.native="handleNewPassword"
          ></el-input>
          <div v-if="newPasswordEyeDiv">
            <img
              :src="eye.eye_open"
              v-if="eyeShownewPassword"
              @click="changenewPassword('show')"
              alt
              class="imgEye"
            />
            <img
              :src="eye.eye_close"
              v-if="!eyeShownewPassword"
              @click="changenewPassword('hide')"
              alt
              class="imgEye"
            />
          </div>
        </el-form-item>
        <el-form-item prop="confirmPwd">
          <el-input
            v-model.trim="ruleForm.confirmPwd"
            :placeholder="passwordChange.confirmPwd"
            autocomplete="off"
            :type="confirmPwdEye"
            @focus="focusShowconfirmPwdEye"
            @keyup.space.native="handleConfirmPwd"
          ></el-input>
          <div v-if="confirmPwdEyeDiv">
            <img
              :src="eye.eye_open"
              v-if="eyeShowconfirmPwd"
              @click="changeconfirmPwd('show')"
              alt
              class="imgEye"
            />
            <img
              :src="eye.eye_close"
              v-if="!eyeShowconfirmPwd"
              @click="changeconfirmPwd('hide')"
              alt
              class="imgEye"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <el-row>
            <!-- <el-col :span="12" align="left">
              <Kt-button
                class="forgotBtn boxShadowButton"
                :size="size"
                :label="passwordChange.passwordForgot"
                :loading="loading"
                @click="forgotClick"
              ></Kt-button>
            </el-col>-->
            <el-col :span="24" align="left">
              <Kt-button
                class="submitBtn boxShadowButton"
                :size="size"
                :label="passwordChange.update"
                :loading="loading"
                @click="submitForm('ruleForm')"
              ></Kt-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import KtButton from "@/components/KtButton";
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
import juxing_Small from "../../../assets/lifeGroupimg/juxing_small.png";
import eye_open from "@/assets/eye_open.png";
import eye_close from "@/assets/eye_close.png";
export default {
  name: "PasswordChange",
  data() {
    return {
      passwordChange: this.$t("m.passwordChange"), //引入 lang 里面的字符串资源,
      size: "medium", //按钮的尺寸
      image: { juxing_Small },
      ruleForm: {
        loginName: "", //登录的账号
        oldPassword: "", //当前密码
        newPassword: "", //新密码
        confirmPwd: "" //确认新密码
      },
      oldPasswordEyeDiv: false, //旧密码 眼睛图片的状态  默认隐藏
      newPasswordEyeDiv: false, //新密码 眼睛图片的状态  默认隐藏
      confirmPwdEyeDiv: false, //确认密码 眼睛图片的状态 默认隐藏
      oldPasswordEye: "password", //旧密码默认为不可见
      newPasswordEye: "password", //新密码默认为不可见
      confirmPwdEye: "password", //确认密码默认为不可见
      eyeShowoldPassword: true, //旧密码 显示隐藏密码的眼睛图片的状态  默认为eye_open
      eyeShownewPassword: true, //新密码 显示隐藏密码的眼睛图片的状态  默认为eye_open
      eyeShowconfirmPwd: true, //确认密码 显示隐藏密码的眼睛图片的状态  默认为eye_open
      //示隐藏密码的眼睛图片
      eye: {
        eye_open,
        eye_close
      },
      loading: false,
      acceptLanguage: "ja_JP" //数据请求传参需要传的语言  ja_JP----日文
    };
  },
  methods: {
    /* 
      修改密码
    */
    submitForm(datainfo) {
      console.log(datainfo, "------");
      this.$refs[datainfo].validate(valid => {
        if (valid) {
          console.log(this.ruleForm);
          let params = new Object();
          params.loginName = this.ruleForm.loginName;
          params.oldPassword = this.ruleForm.oldPassword;
          params.newPassword = this.ruleForm.newPassword;
          params.confirmPwd = this.ruleForm.confirmPwd;
          console.log(params);
          this.$postJson(
            this.ports.passwordChange.editPassword,
            params,
            this.acceptLanguage
          ).then(res => {
            console.log(res);
            if (res.code == 200) {
              this.$message({ message: res.message, type: "success" });
              setTimeout(() => {
                sessionStorage.removeItem("user");
                this.$router.push({ path: "/login" });
              }, 500);
            } else {
              this.$message({ message: res.message, type: "error" });
            }
          });
        } else {
          console.log("修改失败!");
          return false;
        }
      });
    },

    /* 
      获取登录的账号
    */
    getInformation() {
      this.$postForm(
        this.ports.passwordChange.getInformation,
        {},
        this.acceptLanguage
      ).then(res => {
        console.log(res);
        this.ruleForm.loginName = res.result.loginName;
      });
    },

    //旧密码框聚焦  旧密码眼睛图片显示  新密码和确认密码的就隐藏
    focusShowoldPasswordEye() {
      console.log("聚焦");
      this.newPasswordEyeDiv = false;
      this.confirmPwdEyeDiv = false;
      this.oldPasswordEyeDiv = true;
    },
    //新密码框聚焦   新密码 眼睛图片显示 旧密码和确认密码的就隐藏
    focusShownewPasswordEye() {
      console.log("聚焦");
      this.oldPasswordEyeDiv = false;
      this.confirmPwdEyeDiv = false;
      this.newPasswordEyeDiv = true;
    },

    //确认密码框聚焦   确认密码 眼睛图片显示 旧密码和确认密码的就隐藏
    focusShowconfirmPwdEye() {
      console.log("聚焦");
      this.oldPasswordEyeDiv = false;
      this.newPasswordEyeDiv = false;
      this.confirmPwdEyeDiv = true;
    },

    //点击旧密码可见眼睛图片  使密码显示  隐藏
    changeoldPassword(value) {
      console.log(value);
      //通过判断传入值  show  和hide  使密码和图片的状态切换
      if (value == "show") {
        this.oldPasswordEye = "text";
        this.eyeShowoldPassword = false;
      } else {
        this.oldPasswordEye = "password";
        this.eyeShowoldPassword = true;
      }
    },

    //点击新密码可见眼睛图片  使密码显示和隐藏
    changenewPassword(value) {
      console.log(value);
      if (value == "show") {
        this.newPasswordEye = "text";
        this.eyeShownewPassword = false;
      } else {
        this.newPasswordEye = "password";
        this.eyeShownewPassword = true;
      }
    },

    //点击确认密码可见眼睛图片  使密码显示和隐藏
    changeconfirmPwd(value) {
      console.log(value);
      if (value == "show") {
        this.confirmPwdEye = "text";
        this.eyeShowconfirmPwd = false;
      } else {
        this.confirmPwdEye = "password";
        this.eyeShowconfirmPwd = true;
      }
    },

    //旧密码输入框禁止输入空格
    handleOldPassword(e) {
      var keyCode = e.keyCode || window.event.keyCode;
      console.log(keyCode);
      if (keyCode == 32 && this.form.oldPassword == "") {
        this.$refs["form"].clearValidate(); //移除校验结果;
        this.form.oldPassword = null;
      } else {
      }
    },

    //新密码输入框禁止输入空格
    handleNewPassword(e) {
      var keyCode = e.keyCode || window.event.keyCode;
      console.log(keyCode);
      if (keyCode == 32 && this.form.newPassword == "") {
        this.$refs["form"].clearValidate(); //移除校验结果;
        this.form.newPassword = null;
      } else {
      }
    },

    //确认新密码输入框禁止输入空格
    handleConfirmPwd(e) {
      var keyCode = e.keyCode || window.event.keyCode;
      console.log(keyCode);
      if (keyCode == 32 && this.form.confirmPwd == "") {
        this.$refs["form"].clearValidate(); //移除校验结果;
        this.form.confirmPwd = null;
      } else {
      }
    },

    // forgotClick() {
    //   bus.$emit("homePage", {
    //     type: "jump",
    //     path: "/PasswordForgot",
    //     title: this.passwordChange.passwordForgot
    //   });
    // }
  },
  computed: {
    //使用computed计算属性来操作form表单规则的国际化
    rules() {
      //此处的rules 是你声明的名字，参考下图
      var validate_Types = (rule, value, callback) => {
        //兑换类型规则
        if (this.ruleForm.oldPassword == "") {
          callback(new Error(this.$t("m.passwordChange.empty")));
        }
        callback();
      };
      return {
        passwordChange: this.$t("m.passwordChange"), //引入 lang 里面的字符串资源,
        //注意此处的return，别忘记了
        oldPassword: [
          { required: true, validator: validate_Types, trigger: "blur" },
          { min: 5, max: 10, message: this.$t("m.passwordChange.length10") },
          {
            pattern: /^[A-Za-z0-9]+$/,
            message: this.$t("m.passwordChange.notChineseMessage")
          }
        ],
        newPassword: [
          {
            required: true,
            message: this.$t("m.passwordChange.empty"),
            trigger: "blur"
          },
          {
            min: 5,
            max: 10,
            message: this.$t("m.passwordChange.length10"),
            trigger: "blur"
          },
          {
            pattern: /^[A-Za-z0-9]+$/,
            message: this.$t("m.passwordChange.notChineseMessage")
          }
        ],
        confirmPwd: [
          {
            required: true,
            message: this.$t("m.passwordChange.empty"),
            trigger: "blur"
          },
          {
            min: 5,
            max: 10,
            message: this.$t("m.passwordChange.length10"),
            trigger: "blur"
          },
          {
            pattern: /^[A-Za-z0-9]+$/,
            message: this.$t("m.passwordChange.notChineseMessage")
          }
        ]
      };
    }
  },
  created() {
    this.getInformation();
  },
  mounted() {},
  components: {
    KtButton
  }
};
</script>
<style lang="scss" scoped>
.passwordChange {
  padding-bottom: 20px;
  .height40 {
    height: 40px;
    line-height: 40px;
    .height40-span {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: 700;
      img {
        vertical-align: middle;
        margin-right: 15px;
      }
    }
  }
  .passwordChange-b {
    width: 50%;
    padding: 40px 30px;
    .select100 {
      width: 100%;
    }
    /* 更新按钮  修改样式  添加阴影 */
    .submitBtn {
      background: #e6a23c;
      color: #ffffff;
    }
    .initialBtn {
      background: #409eff;
      color: #ffffff;
    }
    .forgotBtn {
      background: #f56c6c;
      color: #ffffff;
    }
  }
}
/* 修改element-ui input文本框默认的样式 */
/deep/ .passwordChange-b .el-input__inner {
  border: none !important;
  border-radius: 0px !important;
  border-bottom: 1px solid #999999 !important;
  background-color: #f6f6f6 !important;
}

/* 修改每一个form表单小项的margin */
/deep/ .passwordChange-b .el-form-item {
  margin-bottom: 42px !important;
}
.imgEye {
  position: absolute;
  top: 5px;
  right: 25px;
  cursor: pointer;
}
</style>